import { h } from 'snabbdom/build/package/h';
import { init } from 'snabbdom/build/package/init';
import { styleModule } from 'snabbdom/build/package/modules/style.js';
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners';

let patch = init([styleModule, eventListenersModule]);

let testList = [
  {
    rank: 1,
    name: '2',
    desc: '3',
  },
  {
    rank: 3,
    name: '4',
    desc: '2',
  },
  {
    rank: 2,
    name: '1',
    desc: '4',
  },
  {
    rank: 5,
    name: '3',
    desc: '5',
  },
  {
    rank: 4,
    name: '5',
    desc: '1',
  },
];

let commonStyle = {
  display: 'inline-block',
  'text-align': 'center',
  'border-bottom': '1px solid #eee',
  'line-height': '44px',
};

let vnode = document.querySelector('#app');

function view(data) {
  const vnode = h('div', { style: { width: '100%' } }, [
    h('h1', '列表'),
    h('div', {}, [
      h('span', '排序方式: '),
      h(
        'button',
        {
          on: {
            click: [sortHandler, 'rank'],
          },
        },
        '排名'
      ),
      h(
        'button',
        {
          on: {
            click: [sortHandler, 'name'],
          },
        },
        '名称'
      ),
      h(
        'button',
        {
          on: {
            click: [sortHandler, 'desc'],
          },
        },
        '描述'
      ),
      h(
        'button',
        {
          style: {
            float: 'right',
            'margin-right': '40px',
          },
          on: {
            click: [addHandler, 'desc'],
          },
        },
        'add'
      ),
      h('div.list', Header()),
      h('div', List()),
    ]),
  ]);

  return vnode;
}

function sortHandler(attr) {
  testList.sort((a, b) => {
    if (a[attr] > b[attr]) {
      return 1;
    }
    if (a[attr] < b[attr]) {
      return -1;
    }
    return 0;
  });
  render();
}

function addHandler() {
  const item = testList[Math.floor(Math.random() * 5)];
  testList.push(item);
  render();
}

function removeHandler(index) {
  testList.splice(index, 1);
  render();
}

const Header = () => {
  return h(
    'h3',
    {
      style: {
        width: '100%',
      },
    },
    [
      h(
        'span',
        {
          style: {
            ...commonStyle,
            width: '25%',
          },
        },
        '排名'
      ),
      h(
        'span',
        {
          style: {
            ...commonStyle,
            width: '25%',
          },
        },
        '名称'
      ),
      h(
        'span',
        {
          style: {
            ...commonStyle,
            width: '25%',
          },
        },
        '描述'
      ),
    ]
  );
};

const List = () => {
  return testList.map((item, index) => {
    return h('div', { style: { width: '100%' } }, [
      h(
        'span',
        {
          style: { ...commonStyle, width: '25%' },
        },
        item.rank
      ),
      h(
        'span',
        {
          style: { ...commonStyle, width: '25%' },
        },
        item.name
      ),
      h(
        'span',
        {
          style: { ...commonStyle, width: '25%' },
        },
        item.desc
      ),
      h(
        'span',
        {
          style: { ...commonStyle, width: '25%' },
          on: {
            click: [removeHandler, index],
          },
        },
        'x'
      ),
    ]);
  });
};

function render() {
  vnode = patch(vnode, view(testList));
}

render();
